<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='UTF-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
    <title>QQ音乐</title>
    <link rel="stylesheet" href="./css/QQmusic.css">
    <script src="./js/Store.js"></script>
</head>
<body>
    <nav>
        <h1>
            <a href="./QQ音乐.html">QQ音乐</a>
        </h1>
        <div class="nav-right">
            <div class="nav-right-apploading">
                QQ音乐,千万高品质曲库尽享
                <a href="#">客户端下载</a>
            </div>
            <a href="#" class="register">登陆</a>
            <a href="#" class="setting">设置</a>
        </div>
    </nav>
    <!-- 歌曲列表 -->
    <div class="container music" id="musicList">
        <div class="music-left">
            <div class="music-toolbar">
                <a href="javascript:;">
                    <span class="icon-collect"></span>
                    收藏
                </a>
                <a href="javascript:;">
                    <span class="icon-add"></span>
                    添加到
                </a>
                <a href="javascript:;">
                    <span class="icon-dow"></span>
                    下载
                </a>
                <a href="javascript:;" id="del-check">
                    <span class="icon-del"></span>
                    删除
                </a>
                <a href="javascript:;" id="clear-list">
                    <span class="icon-cle"></span>
                    清空列表
                </a>
            </div>
            <table>
                <thead>
                    <tr>
                        <th class="tit-checkall"><input type="checkbox" id="checkall"></th>
                        <th class="tit-num"></th>
                        <th class="tit-song">歌曲</th>
                        <th class="tit-singer">歌手</th>
                        <th class="tit-duration">时长</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr class="onPlay">
                        <td><input type="checkbox"></td>
                        <td>1</td>
                        <td>
                            Tokyo
                            <div class="music-left-song-tool">
                                <a href="#" class="song-tool-play"></a>
                                <a href="#" class="song-tool-add"></a>
                                <a href="#" class="song-tool-share"></a>
                            </div>
                        </td>
                        <td>DjKantik</td>
                        <td>
                            <time>03:49</time>
                            <a href="#" class="music-left-song-del"></a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="music-right">
            <!-- <div class="poster"></div>
            <p>歌曲名：<i>平行世界</i></p>
            <p>歌手名：<i>G.E.M. 邓紫棋</i></p>
            <p>专辑名：<i>平行世界</i></p> -->
        </div>
    </div>
    <!-- 播放控制 -->
    <div class="container" id="play-ctrls">
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="play"></a>
        <a href="javascript:;" class="next"></a>
        <div class="music-time">
            <div class="music-cur">
                <p>
                    <a href="#">平行世界</a>
                    <i>-</i>
                    <a href="#">G.E.M. 邓紫棋</a>
                </p>
                <div class="music-cur-time">
                    <time>01:14</time>
                    /
                    <time>04:07</time>
                </div>
            </div>
            <div id="music-slider">
                <div class="plan"></div>
                <div class="slider_btn"></div>
            </div>
        </div>
        <a href="javascript:;" class="play-list"></a>
        <a href="javascript:;" class="collect"></a>
        <a href="javascript:;" class="download"></a>
        <a href="javascript:;" class="comment"></a>
        <a href="javascript:;" class="state"></a>
        <div class="volume">
            <a href="javascript:;" class="volume-icon"></a>
            <div id="volume-slider">
                <div class="plan"></div>
                <div class="slider_btn"></div>
            </div>
        </div>
    </div>

    <audio id="audio" src=""></audio>
    <div class="mask-pic"></div>
    <div class="mask-black"></div>
    
    <script src="./js/QQmusic.js"></script>
</body>
</html>